<template>
  <div class="send-batch-page">
    <h3>发送批次</h3>
    <AreaWarp :padding="true">
      <SearchWarp :label="'发送账号'">
        <el-input v-model.trim="searchInfo.sendAccount" placeholder="请输入完整账号"></el-input>
      </SearchWarp>
      <SearchWarp :label="'发送时间'">
        <el-date-picker
          v-model="searchInfo.sendTime"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :editable="false"
        ></el-date-picker>
      </SearchWarp>
      <BtnWarp>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="info" icon="el-icon-delete" @click="reset">重置</el-button>
      </BtnWarp>
    </AreaWarp>

    <AreaTitleWarp :title="'发送批次'">
      <BtnWarp>
        <el-button type="primary" @click="exportList">导出</el-button>
      </BtnWarp>
    </AreaTitleWarp>

    <!-- 搜索结果 -->
    <AreaWarp :padding="false" v-loading="loading">
      <el-table
        :data="tableInfo.list"
        style="width: 100%"
        class="pub-table"
        header-row-class-name="pub-table-header-row"
        header-cell-class-name="pub-table-header-cell"
        tooltip-effect="dark"
      >
        <el-table-column
          prop="sendTime"
          label="日期"
          min-width="90"
          :formatter="formatter_timeYMDHMS"
        ></el-table-column>
        <el-table-column prop="sendAccount" label="发送账号"></el-table-column>
        <el-table-column prop="sendContent" label="发送内容" min-width="150"></el-table-column>
        <el-table-column prop="sendStatus" label="发送状态" :formatter="sendStatus"></el-table-column>
        <el-table-column prop="sendNum" label="发送总量"></el-table-column>
        <el-table-column prop="arriveNum" label="到达总量"></el-table-column>
      </el-table>
      <el-pagination
        class="pub-page"
        @size-change="handleSizeChange"
        @current-change="search"
        :current-page="searchInfo.page"
        :page-sizes="[20, 50, 100]"
        :page-size="searchInfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableInfo.total"
      ></el-pagination>
    </AreaWarp>
  </div>
</template>
<script>
import Bill from "../../../assets/js/bill.js";
export default {
  data() {
    return {
      searchInfo: {
        sendAccount: "",
        sendTime: "",
        page: 1,
        size: 20
      },
      tableInfo: {
        list: [],
        total: 0
      },
      loading: false
    };
  },
  methods: {
    handleSizeChange(val) {
      let that = this;
      that.searchInfo.size = val;
      that.searchInfo.page = 1;
      that.search();
    },
    //搜索
    search(currentPage) {
      let that = this;
      that.searchInfo.page = typeof currentPage == "number" ? currentPage : 1;

      let x = {
        sendAccount: that.searchInfo.sendAccount,
        sendTime: that.searchInfo.sendTime,
        page: that.searchInfo.page,
        size: that.searchInfo.size
      };

      let bill = new Bill(x);
      let reqData = bill.getState();

      if (reqData.code) {
        that.showMsg(reqData.message, "error");
      }
      that.loading = true;
      that.ajaxJson({
        url: "/bill/sendList",
        data: reqData,
        success: function(res) {
          if (res.code == "0") {
            that.tableInfo = res.data;
          }
          that.loading = false;
        }
      });
    },
    //重置
    reset() {
      let that = this;
      that.searchInfo = {
        sendAccount: "",
        sendTime: "",
        page: 1,
        size: 20
      };
      that.search();
    },
    //导出
    exportList() {
      let that = this;
      let x = {
        sendAccount: that.searchInfo.sendAccount,
        sendTime: that.searchInfo.sendTime,
        page: that.searchInfo.page,
        size: that.searchInfo.size
      };

      let bill = new Bill(x);
      let reqData = bill.getState();

      let url = that.host + "/bill/sendList/export?role=" + that.localData('get','login_user').role;
      if (reqData.sendAccount) {
        url += "&sendAccount=" + reqData.sendAccount;
      }
      if (reqData.sendTimeStart) {
        url += "&sendTimeStart=" + reqData.sendTimeStart;
      }
      if (reqData.sendTimeEnd) {
        url += "&sendTimeEnd=" + reqData.sendTimeEnd;
      }
      window.open(url);
    }
  },
  created() {
    let that = this;
    that.search();
  }
};
</script>
<style lang="less">
.send-batch-page {
}
</style>
